import React from 'react'
import './detail.css'
import Header from '@common/header'
import { Button } from 'antd'
import { LeftOutlined } from '@ant-design/icons'
import { split } from '@utility/filter'
import { getMessageDetail } from '@api/message'
import { imageBase } from '@config/host'

class Detail extends React.Component {

  state = {
    loaded: false, // 是否已加载完毕
    headerTitle: '消息通知列表',
    headerOptions: [
      { name: '首页', path: '/home' },
      { name: '消息通知列表', path: '/message/list' },
      { name: '查看原文' },
    ]
  }

  componentDidMount() {
    this.getMessageDetail()
  }

  // 获取消息详情
  getMessageDetail(id = this.getQueryData('id')) {
    getMessageDetail(id).then(res => {
      console.log(res)
      let { detail } = res
      this.setState({
        detail,
        loaded: true
      })
    })
  }

  // 关闭窗口
  closeWindow = () => {
    window.opener = null
    window.open('', '_self')
    window.close()
  }

  // 前往上条消息
  goPrev = () => {
    let { detail } = this.state
    this.getMessageDetail(detail.preid)
  }

  // 前往下条消息
  goNext = () => {
    let { detail } = this.state
    this.getMessageDetail(detail.nextid)
  }

  render() {
    let { loaded, headerTitle, headerOptions, detail } = this.state
    return loaded ? (
      <div className="_message-detail">
        <Header title={ headerTitle } options={ headerOptions }></Header>
        <div className="detail-container">
          <div className="detail-box">
            <div className="detail-back" onClick={ this.closeWindow }>
              <LeftOutlined />返回
            </div>
            <div className="detail-title">{ detail.title }</div>
            <div className="detail-content">
              <p className="detail-text">{ detail.content }</p>
              <div className="detail-images">
                {
                  split(detail.img).map((item, index) => {
                    return (
                      <img className="detail-images-item" src={ imageBase + '/' + item } alt="" key={ index }/>
                    )
                  })
                }
              </div>
            </div>
            <div className="detail-paeg_turning">
              <Button className="detail-prev" type="primary" disabled={ !detail.preid } ghost onClick={ this.goPrev }>上一页</Button>
              <Button className="detail-next" type="primary" disabled={ !detail.nextid } ghost onClick={ this.goNext }>下一页</Button>
            </div>
          </div>
        </div>
      </div>
    ) : null
  }

}

export default Detail